   /**
 * Author: truexin
 * Date: 2016/07/07
 */
/**
 * menuList: [{text: '',url: '',num: ''  },...]
 * text: 按钮名称和title使用
 * url: 跳转页面URL
 * num: 显示数量的数字
 * counts: 每行按钮数量 (用于二维数组)
 */

let MenuBtn = React.createClass({
    tapFn() {
        let $listPage = $('.list');
        let me = this;
        
        $listPage.each(function (i) {
            
            let $me = $(this);
            $me.off();

            this.addEventListener('touchend', function () {
                
                let url = me.props.menuList[i].url || location.href;
                let title = me.props.menuList[i].text;
                
                liefeng.bridgeJs.doAction(url, title);
                
            });
        })
    },
    componentDidUpdate() { //防止是state , props传进来无法点击跳转
        this.tapFn();
    },
    componentDidMount() { //防止是state , props传进来无法点击跳转
        this.tapFn();
    },
    render() {
        let count = this.props.count || 2;  // 每行按钮显示的数目;
        
        let item2DArray = liefeng.utils.to2DArray(this.props.menuList || [], count);
        
        let menus = item2DArray.map((array, i) => { //{判断是否元素存在与否会生成对应元素span或者p...,样式方面不要使用元素选择器}
            return (
                <div key={'array' + i} className="flex">
                    {
                        array.map(menu => {
                            return <div className="item list" ref="list">
                                {
                                    menu.tip && menu.tip.trim() ?
                                        <p className='decoration'>{menu.tip}</p> :
                                        ''
                                }
                                {
                                    menu.num && menu.num.trim() ?
                                        <span className="redNum">{menu.num}</span> :
                                        ''
                                }
                                <p className={'normal ' + (menu.num && menu.num.trim() ? ' ' : 'toCenter')}>{menu.text}</p>
                            </div>
                        })
                    }
                </div>
            );
        });
        
        return (
            <div className="menu-btn">
                {menus}
            </div>
        );
    }
})


export default MenuBtn;

